<%--
  Created by IntelliJ IDEA.
  User: Jafrin
  Date: 9/5/12
  Time: 7:24 PM
  To change this template use File | Settings | File Templates.
--%>
<script type="text/javascript">
    var template_index = 1;
    var dependency_template_index = 1;
    $("#answering-option-tr").hide()
    $("#add-more-button-tr").hide()

    function addTemplate(table, row, index) {

        template_index++;
        var flagMessage = false;

        var tr = $.templateRenderer(row.html().toString(), {i:index});
        $(tr).appendTo(table).addClass('newTblRow');

//          $('.timeClass').timepicker({
//              showPeriod: true,
//              showLeadingZero: true
//          });
    }


    function deleteSectionTimeSlot(obj, trindex) {

        if (trindex != 0) {
//            $("#dialog").dialog("destroy");
//            $("#dialog-confirm-admissionSeatPlan").dialog({
//                resizable:false,
//                height:150,
//                modal:true,
//                title:'Delete alert',
//                buttons:{
//                    'Delete item(s)':function () {
//                        $(this).dialog('close');

            if ($("#sectionTimeSlotId_" + trindex).val() > 0) {
                $('#sectionTimeSlot' + trindex + 'isDeleted').val('true');
                $(obj).parent().hide();
            } else {
                template_index--
                $(obj).parent().remove()
            }

//                    },
//                    Cancel:function () {
//                        $(this).dialog('close');
//                    }
//                }
//            }); //end of dialog
        }
    }

    function showHideAnsweringOption() {
        if ($("#answeringType").val() && $("#answeringType").val() != 3) {
            $("#answering-option-tr").show()
        }
        else {
            $("#answering-option-tr").hide()
        }
    }

    function executeAjax()
    {
        $.ajax({
           url:'${request.contextPath}/${params.controller}/create',
            data:jQuery("#gFormQuestion").serialize(),
            dataType:'json',
            type:'post',
            success:function(response)
            {
                MessageRenderer.render(response)
            }
        });
    }
</script>
<script type="text/html" id="section_timeslot_template">
    <g:render template='addmoreTemplate'
              model="['academicSectionItem': academicSection, 'i': '#{i}', 'timeSlotList': timeSlotList]"/>
</script>
<%@ page contentType="text/html;charset=UTF-8" %>
<meta name="layout" content="main"/>
<g:form name="gFormQuestion" id="gFormQuestion">
<div style="width:100%;">
    %{--<g:hiddenField name="project.id" id="project" value=" ${projectID}" />--}%

    <div id="remote-content-questionInstance"></div>
    <fieldset class="ui-state-default ui-corner-all">
        <legend class="ui-jqgrid-titlebar ui-widget-header  ui-helper-clearfix">Create Question</legend>
        <table>

            <tr>
                <td><g:message code="question.question.label" default="Project"/></td>
                <td><g:textField name="project.id" id="project" value="${projectID}" readonly="true"/>
                </td>
            </tr>

            <tr>
                <td><g:message code="question.question.label" default="Question"/></td>
                <td><g:textArea cols="40" rows="5" name="question"
                                value="${fieldValue(bean: questionInstance, field: 'question')}"/>
                </td>
            </tr>

            <tr>
                <td><g:message code="question.answeringType.label" default="Answering Type"/></td>
                <td><g:select name="answeringType.id" id="answeringType"
                              from="${com.na.onlineservey.AnsweringType.list()}"
                              optionKey="id" value="${questionInstance?.answeringType?.id}"
                              noSelection="['': 'Select One']" onchange="showHideAnsweringOption()"/>
                </td>
            </tr>


            <tr>
                <td><g:message code="question.description.label" default="Description"/></td>
                <td><g:textArea cols="40" rows="5" name="description"
                                value="${fieldValue(bean: questionInstance, field: 'description')}"/>
                </td>
            </tr>

            <tr id="answering-option-tr">
                <td>Answering Option</td>
                <td>
                    <table id="section-time-slot-table" class="simple-table-css"
                           style="max-width:600px; border: 1px  #ccc solid; border-collapse: collapse; ">
                        <tr>
                            <td><label class='create-form-label' for="day"><g:message
                                    code="questionAnsweringOption.code.label"
                                    default="Code"/></label></td>
                            <td><label class='create-form-label' for="startTime"><g:message
                                    code="questionAnsweringOption.option.label" default="Answer"/></label>
                            </td>

                        </tr>
                        <g:if test="${questionAnsweringOptionList}">
                            <g:each var="questionAnsweringOption" in="${questionAnsweringOptionList}" status="i">
                                <g:render template='addmoreTemplate '
                                          model="['question': question, 'i': i, 'questionAnsweringOption': questionAnsweringOption]"/>
                            </g:each>
                        </g:if>
                        <g:else>
                            <g:render template='addmoreTemplate'
                                      model="['question': question, 'i': 0, 'questionAnsweringOption': questionAnsweringOption]"/>
                        </g:else>
                    </table>
                </td>
            </tr>
            <tr id="add-more-button-tr">
                <td></td>
                <td><div>
                    <input id="addMoreTimeSlot"
                           type="button"
                           class="ui-button ui-widget ui-state-default ui-corner-all"
                           style="width:100px; !important;"
                           value="Add More"
                           onclick="addTemplate($('#section-time-slot-table'), $('#section_timeslot_template'), template_index);"/>
                    &nbsp;&nbsp;

                </div>

                </td>
            </tr>
        </table>
    </fieldset>
    <br/>

    <div class="buttons">
        <span class="button"><input type="button" name="create-button" id="create-button"
                                    class="ui-button ui-widget ui-state-default ui-corner-all" value="Save"
                                    onclick="executeAjax();"/></span>
    </div>
</div>
</g:form>

